<!--
 * @Date: 2024-09-27 15:10:55
 * @LastEditors: Lcx l1556461835@163.com
 * @LastEditTime: 2025-03-18 08:56:42
 * @FilePath: \fushun-gitee\components\OrderDetail.vue
 * @Description: 订单详情组件
-->
<template>
  <div :style="{width: _width}" class="orderDetail">
    <div v-if="showDetail" class="flex orderDetailItem">
      <div class="orderDetailItem-label">订单编号</div>
      <div style="flex: 1" >
        <span>{{ formData.code }}</span>
      </div>
    </div>
    <div class="flex orderDetailItem">
      <div class="orderDetailItem-label">1. 顾客信息</div>
      <div style="flex: 1">
        <table class="uTable">
          <tbody>
            <tr>
              <td><span>顾客名称</span></td>
              <td>
                <span>{{ formData.customerName }}</span>
              </td>
            </tr>
            <tr>
              <td><span>顾客联系方式</span></td>
              <td>
                <span>{{ formData.customerPhone }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="flex orderDetailItem">
      <div class="orderDetailItem-label">2. 生产规格数量</div>
      <div style="flex: 1">
        <table class="uTable">
          <tbody>
            <tr>
              <td>钢类</td>
              <td>{{ formData.steelTypeName }}</td>
            </tr>
            <tr>
              <td>钢种</td>
              <td>{{ formData.steelGradeName }}</td>
            </tr>
            <tr>
              <td>规格</td>
              <td>{{ formData.specification }}</td>
            </tr>
            <tr>
              <td>数量</td>
              <td>{{ formData.steelNumber }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="flex orderDetailItem">
      <div class="orderDetailItem-label">3. 技术生产要求</div>
      <div style="flex: 1">
        <table class="uTable">
          <tbody>
            <tr>
              <td>标准</td>
              <td>{{ formData.standardName }}</td>
            </tr>
            <tr>
              <td>冶炼方法</td>
              <td>
                <span class="ye-duan text-wrap">
                  {{
                    formData.smeltingProcess
                      ? formData.smeltingProcess.toString()
                      : ""
                  }}
                </span>
                <span v-if="formData.recommendRoute == 1 && showEditBtn == 1" class="ye-btn" @click="handleEditYeLian">编辑</span>
              </td>
            </tr>
            <tr>
              <td>交货状态</td>
              <td>{{ formData.deliveryStatus }}</td>
            </tr>
            <tr>
              <td>加工方法</td>
              <td>{{ formData.processingPurpose }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="flex orderDetailItem">
      <div class="orderDetailItem-label">4. 特殊要求</div>
      <div style="flex: 1; width: 100%">
        <p style="margin-bottom: 10px" class="text-wrap">
          {{ formData.specialRequirements }}
        </p>
        <div>
          <span>附件：</span>
          <el-button type="warning" size="mini" @click="handleSee"
            >查看附件</el-button
          >
        </div>
      </div>
    </div>
    <div class="flex orderDetailItem">
      <div class="orderDetailItem-label">5. 评审要求</div>
      <div style="flex: 1">
        <p style="margin-bottom: 10px">{{ formData.reviewRequire }}</p>
        <!-- 判断这个字段：isOutsourcingFirm -->
        <div v-if="disabled == 1 && formData.isOutsourcingFirm">
          <Waiwei ref="orderWaiWeiRef" :form-info="formData" :disable="true"></Waiwei>
        </div>
      </div>
    </div>
    <div class="flex orderDetailItem">
      <div class="orderDetailItem-label">6. 其他信息</div>
      <div style="flex: 1">
        <div style="margin-bottom: 10px">
          <span>备注：</span>
          <span>{{ formData.remark }}</span>
        </div>
        <div class="flex">
          <div style="width: 150px">填表人：{{ formData.authorName }}</div>
          <div>负责业务员：{{ formData.salesmanName }}</div>
        </div>
      </div>
    </div>
    <slot name="orderFoot" />
    <!-- 附件 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="fileDialogVisible"
      title="附件内容"
      width="30%"
    >
      <el-table v-loading="loading" :data="gridData"  height="200" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column prop="filename" label="附件名称"></el-table-column>
        <el-table-column prop="createdTime" label="创建日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <el-button type="text" @click="handlePreview(scoped.row)">预览</el-button>
            <el-button type="text" @click="handleDownLoad(scoped.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 冶炼方法配置 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="gongyiDialogVisable"
      title="冶炼方法配置"
      width="50%">
      <Smelting ref="yelianRefs"></Smelting>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="onClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  viewAttachments,
  FileDownLoad,
  EDIT_PENDING_ORDERS
} from "@/lib/Api.js";
import Waiwei from "@/components/Waiwei.vue";
import { post, downloadFile } from "@/lib/Util.js";
import { Base64 } from "js-base64";
import Smelting from "@/components/Smelting.vue";
export default {
  components: { Waiwei, Smelting },
  props: {
    formData: {
      type: Object,
      default: () => {}
    },
    _width: {
      type: String,
      default: "100%"
    },
    showDetail: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Number,
      default: 1
    },
    showEditBtn: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      gridData: [],
      fileDialogVisible: false,
      gongyiDialogVisable: false,
      loading: false
    };
  },
  methods: {
    handleSee() {
      if (this.formData.attachmentId) {
        this.getEnclosureData();
      } else {
        this.$message({
          message: "暂无附件数据",
          type: "warning"
        });
      }
    },
    // 查询附件
    getEnclosureData() {
      this.fileDialogVisible = true;
      this.loading = true;
      post(viewAttachments, { id: this.formData.id }).then(resp => {
        this.loading = false;
        if (resp.data) {
          this.gridData = Array.isArray(resp.data) ? resp.data : [];
        } else {
          this.$message({
            message: "暂无数据",
            type: "warning"
          });
        }
      });
    },
    // 预览
    handlePreview(row) {
      let url = "http://192.168.5.129:8012/demo/" + row.filename; //要预览文件的访问地址
      window.open(
        "http://192.168.5.129:8012/onlinePreview?url=" +
          encodeURIComponent(Base64.encode(url)),
        "_blank"
      );
    },
    handleDownLoad(row) {
      downloadFile(FileDownLoad + "/" + this.formData.id, "");
    },
    handleEditYeLian() {
      this.gongyiDialogVisable = true;
    },
    onClose() {
      this.$refs.yelianRefs.onReset();
      this.gongyiDialogVisable = false;
    },
    onSubmit() {
      if (
        this.$refs.yelianRefs.dropContent &&
        this.$refs.yelianRefs.dropContent.length
      ) {
        post(EDIT_PENDING_ORDERS, {
          smeltingProcess: this.$refs.yelianRefs.dropContent.split("+"),
          id: this.formData.id
        }).then(() => {
          this.gongyiDialogVisable = false;
          this.$refs.yelianRefs.onReset();
          this.$emit("reloadOrder");
        });
      }
    }
  }
};
</script>

<style lang="scss">
.orderDetail {
  color: #fff;
  font-size: 16px;
  min-width: 600px;
}
.orderDetailItem {
  margin-bottom: 24px;
}
.orderDetailItem-label {
  font-size: 18px;
  min-width: 140px;
}
.text-wrap {
  word-wrap: break-word; /* 适用于旧版本的浏览器 */
  overflow-wrap: break-word; /* 标准属性 */
}
.ye-duan {
  width: 80%;
  display: inline-block;
}
.ye-btn {
  display: inline-block;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  float: right;
  :hover {
    color: #6f9ecd;
  }
}
</style>
